<template>
<div class='index'>
  <div class="title"><p>欢迎开启我们的</p><p>寻人之旅</p></div>
  <div class="en welcome-reflectio">WELCOME TO START OUR JOURNEY OF FINDING PEOPLE</div>
   <div class="start">
    <button  @click="navigateToQdkb" type="button" class="el-button el-button--primary el-button--large  hover-animate">开始旅程</button>
    </div>
</div>
</template>

<script>
</script>
<style scoped>
.index{
  padding: 20px 46px;
  background: linear-gradient(135deg, #f0f9ff 0%, #e6f7ff 50%, #f0fff4 100%);
  min-height: calc(100vh - 84px);
    
}
.title{
  font-size:43px;
  line-height:30px;
  color: #13C2C2;
  text-align: justify;

}
.title p{
 
}
.en{
  font-size: 18px;
  color: #92959e;
  margin-top: 20px;
  text-align: justify;
}
.welcome-reflection {
  position: relative;
  display: inline-block;
  color: rgba(146, 149, 158, 0.7);
  letter-spacing: 1px;
  padding-bottom: 25px;
}

.welcome-reflection::after {
  content: attr(data-text);
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  color: transparent;
  background: linear-gradient(to top, rgba(255,255,255,0.3), transparent);
  -webkit-background-clip: text;
  background-clip: text;
  transform: scaleY(-0.6) translateY(5px);
  opacity: 0.6;
  filter: blur(0.5px);
}
.start{
  padding-top: 50px;
      
}
.start button{
  padding: 18px 60px;
  font-size: 18px;
}
.hover-animate {
  transition: all 0.3s ease-in-out;
  transform: scale(1);
  
}

.hover-animate:hover {
  transform: scale(1.05);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}

</style>

<script>
export default {
  methods: {
    navigateToQdkb() {
      this.$router.push('/system/qdkb');
    }
  }
}
</script>